<template>
<div>
  <div class="headContainer" style="height:40px">
      <a href="" class="mainTitle">爱宠邦管理系统</a>
       
      <div class="loginTemplate">
          <ul>
              <li><i class="el-icon-user-solid"></i></li>
                  <span v-if="isLogin">正在登录.....</span>
                  <template v-else-if="user">
                    <span>{{user.userName}}</span>
                    <a href="" @click.prevent="handleLoginOut">退出登录</a>
                  </template>
                  <template v-else>
                    <router-link :to="{name:'Login'}">登录</router-link>
                    <router-link :to="{name:'Reg'}">注册</router-link>
                  </template>
          </ul>   
      </div>
  </div>
<el-container>
  <el-aside width="201px">
        <el-menu  background-color="rgb(56, 61, 73)"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="$route.name"
      :router="true"
      >
      <el-submenu v-for="(item,i) in throneList" :key="i" :index="i+''">
        <template slot="title"><i :class="iconList[i]"></i>{{domain2Name[item.thronePath]}}</template>
        <el-menu-item-group>
          <el-menu-item :index="item.thronePath">{{domain2Name[item.thronePath]}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="10">
        <template slot="title"><i class="el-icon-collection-tag"></i>统计</template>
        <el-menu-item-group>
          <el-menu-item index="TrendPage">销售趋势</el-menu-item>
          <el-menu-item index="SellerPage">商家销售记录</el-menu-item>
          <el-menu-item index="RankPage">地区销售排行</el-menu-item>
          <el-menu-item index="StockPage">库存和销量分析</el-menu-item>
          <el-menu-item index="MapPage">商家分布</el-menu-item>
          <el-menu-item index="HotPage">热销商品占比</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
    </el-aside>
  <el-container>
    <el-header style="height:40px">
      <slot name="breadNav"></slot>
    </el-header>
    <el-main>
          <slot name="main"></slot>
          </el-main>
    <el-footer style="height:30px">@3rd.com - 底部固定区域</el-footer>
  </el-container>
</el-container>
</div>

</template>

<script>
import {mapState} from 'vuex'
import * as InitService from '@/services/InitThemeService.js'
export default { 
  
    data(){
      return{
        userId:null,
        throneList:[],
        domain2Name:{
          '/AddStore':"门店申请",
          '/Goods':"商品管理",
          '/Order':"订单管理",
          '/Service':"服务管理",
          '/Store':"门店管理",
          '/Petowner':"宠物主管理",
          '/User':"用户管理",
          '/Role':"角色管理",
          '/Throne':"权限管理",
        },
        iconList:[
          "el-icon-house",
          "el-icon-goods",
          "el-icon-date",
          "el-icon-service",
          "el-icon-office-building",
          "el-icon-collection",
          "el-icon-s-custom",
          "el-icon-user",
          "el-icon-set-up",
        ]
      }
    },
     methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleLoginOut(){
        this.$store.dispatch("loginUser/loginOut");
        this.$router.push({name:"Login"});
      }
    },
     computed:{
        // realShowChannels(){
        //     return this.channels.slice(0,5);
        // }
        ...mapState('loginUser',{
          user:'data',
          isLogin:"isLoading"
        }),

    },

    async created(){
      //这里的2是将来得从用户登录信息localstorage那里得到的userId
      console.log("++++++++++++++++++++++")
      console.log(this.$route.params.uu)
      var resp1 = await InitService.getUserRole(this.$route.params.uu.userId);
      //通过roleId得到权限Id集合
      var resp2 = await InitService.getRoleThrone(resp1.fkRoleId);
      //通过权限Id得到权限的集合
      var throneIdStr='';
      resp2.forEach(element => {
          throneIdStr =throneIdStr + element.fkThroneId+',';
      });

      // resp2.forEach(async element => {
      //   var throne= await InitService.getThrone(element.fkThroneId);
      //   this.throneList.push(throne);
      // });
      console.log("==========throneIdStr==========");
      console.log(throneIdStr);
      this.throneList =await InitService.getThroneListByIdStr(throneIdStr);

      
    }


}
</script>

<style>
.mainContainer{
    background-color: rgb(233, 238, 243);
    overflow: scroll;
    text-decoration: none;
}
.loginTemplate{
    float: right;
    line-height: 40px;
    position: absolute;
    right: 20px;
}
.router-link-exact-active {
  color: #fcb85f;
}

.loginTemplate>ul>li{
    margin:0px 5px 0 5px;
    float:right;
}

.mainTitle{
    text-decoration: none;
    /* color:rgb(0, 150, 136)
     */
    color:#fff;
    font-weight: 800;
    line-height: 40px;
    margin-left: 20px;
}
.navBread{
  
  line-height: 40px;
}


.headContainer{
  /* height: 60px; */
  background: rgb(62, 154, 121);
  color: #fff;
  line-height: 60px;
  /* position: fixed; */
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
}
.el-header{
    background-color:rgb(26, 42, 58);
    color: #ccc;
    /* text-align: center; */
    height: 40px;
    line-height: 40px;
}
 .el-footer {
    background-color: #B3C0D1;
    color: #333;
    /* text-align: center; */
    height: 40px;
    line-height: 30px;
    font-size: 12px;
    font-style: italic;
    position:fixed;
    bottom: 0;
    width:1200px;
    margin:0 auto 0
  }
  
  .el-aside {
    background-color:rgb(56, 61, 73);
    color: #333;
    /* text-align: center; */
    /* line-height: 200px; */
    min-height: 720px;
    width: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
  }
  
  body > .el-container {
    /* margin-bottom: 40px; */
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  } 
  
   .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  
element.style {
    padding-left: 40px;
}

.el-menu-item-group__title {
    padding: 0px 0 0px 0px;
    }
    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

</style>